<template>
	<view class="gd-info-box">
		<phoneSimuHead :titleTxt="titleTxt" :isShow="true"></phoneSimuHead>
		<view class="tit-box">
			<view class="arrow-txt"><text class="icon-font" >&#xe604;</text></view>
			<view class="tit-txt" >产品详情</view>
		</view>
		<view class="gd-box phone-list">
			<view class="carousel" :style="{'height':imgHeight + 'px'}" v-if="gdInfo" >
				<swiper duration="400" :autoplay="gdImgAutoPaly" v-if="gdInfo.imgs" interval="5000" circular @click="edit({act:action.editGoodsSpwerPic,data:gdId});curEditId = action.editGoodsSpwerPic">
					<swiper-item class="swiper-item" v-if="item.img_url"  v-for="(item,index) in gdInfo.imgs" :key="index">
						<view class="image-wrapper">
							<image :src="item.img_url" 
								class="loaded" 
								mode="aspectFill">
							</image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			
			<!-- 活动说明 -->
			<view class="active-direction">
				<text class="txt">活动说明</text>
			</view>
			
			<!-- 活动说明 -->
			<view class="active-direction contact-merchant">
				<text class="txt">联系商家</text>
			</view>    
			
			<view class="music-btn-box">
				<image class="music-btn-img" :src="musicSrcImgData.imgOnIcon"></image>
			</view>
			
			<view class="e-sp-box" :style="'height:'+(imgHeight-2)+'px'" v-if="curEditId == action.editGoodsSpwerPic">
				<image class="edit-img" src="../../../static/images/edit-img-icon.png" @click="edit({act:action.editGoodsSpwerPic,data:gdId});"></image>
				<view class="e-gd-sp-line" @click="edit({act:action.editGoodsSpwerPic,data:gdId});"></view>
			</view>
			
			<view class="gd-info-box-s">
				<view class="tit-txt" :class="{'dahsed-line':curEditId == action.editGoodsTitle}" @click="edit({act:action.editGoodsTitle,data:gdId});curEditId = action.editGoodsTitle">{{gdInfo.title}}</view>
				<view class="p-txt" :class="{'dahsed-line':curEditId == action.editGoodsPrice}" @click="edit({act:action.editGoodsPrice,data:gdId});curEditId = action.editGoodsPrice">￥{{gdInfo.price}}</view>
				<view class="p-i-q-l">
					<view class="p-q-l-txt through-line" :class="{'dahsed-line':curEditId == action.editGoodsPrice0}" @click="edit({act:action.editGoodsPrice0,data:gdId});curEditId = action.editGoodsPrice0">￥{{gdInfo.price0}}</view>
					<view class="p-q-l-txt" :class="{'dahsed-line':curEditId == action.editGoodsQty}" @click="edit({act:action.editGoodsQty,data:gdId});curEditId = action.editGoodsQty">库存{{gdInfo.qty}}</view>
					<view class="p-q-l-txt" :class="{'dahsed-line':curEditId == action.editGoodsLimitBuy}" @click="edit({act:action.editGoodsLimitBuy,data:gdId});curEditId = action.editGoodsLimitBuy">每人限购{{gdInfo.editGoodsLimitBuy}}件</view>
				</view>
				<view class="p-bar" @click="curEditId=''">
					<view class="p-bar-c"></view>
				</view>
				<view class="b-s-txt"  @click="curEditId=''">已抢<text class="r-num">{{gdInfo.rNum}}</text>件，仅剩<text class="r-num">{{gdInfo.rNum}}</text>件</view>
			</view>
			<view class="gd-desc-box-s" :class="{'gd-desc-dashed-line': curEditId == action.editGoodsDesc}"
				@click="edit({act:action.editGoodsDesc,data:gdId});curEditId = action.editGoodsDesc">
				<view class="t-txt">产品介绍</view>
				<!-- <text class="d-s-txt" v-if="gdInfo.gdDescTxt">{{gdInfo.gdDescTxt}}</text> -->
				<!-- <view class="d-s-txt">是什么意思及中文翻译: 动词(v.)(翻)译 动词(v.)(在另一语言中)意思是 动词(v.)(使)转变为</view> -->
				<view class="d-box" v-for="(item,index) in gdInfo.gdDesc">
					<view class="d-txt" v-if="item.text">{{item.text}}</view>
					<image class="img-item" v-for="(img,idx) in item.imgs" :key="idx" :src="img.img_url" mode="widthFix"></image>
				</view>
			</view>
			<view class="follow-box">
				<view class="f-btn" :style="'color:'+follow.color+';background-color:'+follow.bgColor"
					@click="curEditId = action.editFlowBtn">
					{{btnName}}
				</view>
				<view class="f-line" v-if="curEditId == action.editFlowBtn"></view>
				<view class="f-e-box" v-if="curEditId == action.editFlowBtn">
					<text class="st-txt" @click.stop="edit({act:action.editGoodsFlowBtnStyle,data:follow})">编辑样式</text>
					<text class="g-txt">|</text>
					<text class="st-txt" @click.stop="edit({act:action.editGoodsFlowBtnContext,data:{}})">编辑内容</text>
				</view>
			</view>
		</view>
		<view class="gd-btn-box-s">
			<view class="tab-bar-box">
				<view class="tab-b tb-t-r-l">
					<view class="t-b-i">
						<image src="../../../static/images/icon-home-page.png"></image>
					</view>
					<view class="t-b-t">
						<text>首页</text>
					</view>
				</view>
				<view class="tab-b">
					<view class="t-b-i">
						<image src="../../../static/images/menu04.png"></image>
					</view>
					<view class="t-b-t">
						<text>订单</text>
					</view>
				</view>
			</view>
			<view class="buy-fav-btn">立即购买</view>
		</view>
		<!-- 编辑关注按钮样式 -->
		<editFollowStyle  ref="editFollowStyle" @editFollowTxtBg="editFollowTxtBg"></editFollowStyle>
	</view>
</template>

<script>
	import phoneSimuHead from "@/components/interactive/appComponrnts/phone-simulation-head.vue";
	import editFollowStyle from './eidt-follow-style.vue';
	import editActiveGoods from "@/js/inieractive/EditActiveGoods.js";
	export default{
		components:{phoneSimuHead,editFollowStyle},
		props:{
			gdId:{
				type:String,
				default:"",
			},
			gdInfo:{
				type:Object,
				default:{},
			},
		},
		
		data(){
			return{
				titleTxt:"",//标题
				action:editActiveGoods.action,
				curEditId:"",
				btnName : '',
				musicSrcImgData:{
					imgOnIcon:"",
				},
				
				gdImgAutoPaly:true,
				imgHeight:375,
				
				// 关注我们
				follow: {
					color: "#FFF", //字体颜色
					bgColor: "#3388FF", //背景颜色
				},
				gd_pos:"",
			}
		},
		mounted() {
			uni.$on('init_active_title',(data)=>{
				this.titleTxt = data;
			});
		},
		methods:{
			updateBtnName(name)
			{
				this.btnName = name;
			},
			initData(data)
			{
				if(data.hd_set)
				{
					if(data.hd_set.set_skin)
					{
						let skin = data.hd_set.set_skin;
						this.musicSrcImgData = skin.homePage.musicSrcImgData;
					}
				}
			},
			
			updateUpdateSkin(data)
			{
				this.gd_pos = data.gd_pos;
				this.follow.color = data.follow.color;
				this.follow.bgColor = data.follow.bgColor;
			},
			
			edit(data)
			{
				let act = this.action;
				if(data.act == act.editGoodsSpwerPic) //编辑轮播图
				{
					this.$emit('editGoodsSpwerPic')
				}
				if(data.act == act.editGoodsFlowBtnStyle)
				{
					this.$refs.editFollowStyle.showWin(data);
				}
				else 
				{
					editActiveGoods.eidt(data);
				}
			},
			
			//编辑关注按钮样式
			editFollowTxtBg(data)
			{
				this.follow.bgColor = data.data.bgColor;
				this.follow.color = data.data.color;
				this.$emit("gdFollowSkin",{gd_pos:this.gd_pos,follow:data.data});
				editActiveGoods.eidt(data);
			},
		}
	}
</script>

<style lang="scss">
	.gd-info-box{
		width: 100%;
		height: 100%;
		position: relative;
		
		.g-txt
		{
			padding: 0 10px;
		}
		
		.st-txt
		{
			cursor: pointer;
		}
		
		.tit-box
		{
			border-top:1upx solid #eee;
			background-color: #FFF;
			display: flex;
			padding: 20upx 20upx;
			text-align: center;
			align-items: center;
			justify-content: center;
			position: relative;
			color: #333;
			.arrow-txt
			{
				position: absolute;
				left: 20upx;
				font-size: 30upx;
			}
			
			.tit-txt
			{
				font-size: 30upx;
				cursor: pointer;
			}
		}
		
		.gd-box
		{
			position:relative;
			width: 100%;
			height:calc(100% - 370upx);
			swiper{
				height: 100%;
			}
			.image-wrapper{
				width: 100%;
				height: 100%;
				
			}
			.swiper-item {
				display: flex;
				justify-content: center;
				align-content: center;
				 
				height: 520upx;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
			}
			
			.e-sp-box
			{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				.edit-img
				{
					width: 48px;
					height: 48px;
					position: absolute;
					left: 5px;
					top: 5px;
					z-index: 999;
				}
				.e-gd-sp-line
				{
					width: calc(100% - 2px);
					height: 100%;
					border: 1px #000 dashed;
					position: absolute;
					left: 0px;
					top: 0px;
				}
			}
		
			
			.active-direction
			{
				right: 20upx;
				top: 30upx;
				height: 46upx;
				width: 46upx;
				background-color: #FFF;
				position: absolute;
				text-align: center;
				color: #FF6600;
				padding: 20upx 20upx;
				border-radius: 56upx;
				cursor: pointer;
				.txt
				{
					position: absolute;
					top:14upx;
					left: 14upx;
					width: 60upx;
					line-height: 30upx;
				}
			}
			
			.contact-merchant
			{
				top: 130upx;
				color: #3388FF;
			}
			
			.music-btn-box
			{
				position: absolute;
				width: 66upx;
				height: 66upx;
				top:10px;
				left: 9px;
				z-index: 999;
				cursor: pointer;
				.music-btn-img,.logo-img
				{
					width: 100%;
					height: 100%;
					transform: scale(.9);
					border-radius: 80upx;
				}
			}
			
			.gd-info-box-s
			{
				background-color: #FFF;
				padding: 20upx;
				width:calc(100% - 40upx);
				.tit-txt
				{
					font-size: 40upx;
					font-weight: bold;
					
				}
				.dahsed-line
				{
					border: 1upx dashed #000;
					
				}
				.p-txt
				{
					color: #F44848;
					font-size: 36upx;
					font-weight: bold;
					cursor: pointer;
				}
				.p-i-q-l
				{
					color: #999;
					display: flex;
					padding-bottom: 20upx;
					cursor: pointer;
					.p-q-l-txt
					{
						padding-right: 100upx;
						// box-sizing: border-box;
					}
					.through-line
					{
						text-decoration: line-through;
					}
				}
				
				.p-bar
				{
					width: calc(100% - 40upx);
					height: 20upx;
					background-color: #DDD;
					.p-bar-c
					{
						background-color:#F44848;
						width: 50%;
						height: 100%;
					}
				}
				
				.b-s-txt
				{
					font-size: 30upx;
					color: #333;
					padding: 20upx 0;
					text-align: center;
					.r-num
					{
						color: #F44848;
					}
				}
			}
             
			.gd-desc-dashed-line
			{
				border: 1upx dashed #000;
			}
			.gd-desc-box-s
			{
				color: #333;
				margin-top: 20upx;
				font-size: 30upx;
				background-color: #FFF;
				cursor: pointer;
				position: relative;
			    .d-s-txt
				{
					padding: 20upx;
				}
				.t-txt
				{
					padding: 20upx;
					text-align: center;
					border-bottom: 1upx #eee solid;
				}
				.d-box
				{
					.d-txt
					{
						color: #666;
						padding: 10upx 20upx;
					}
					.img-item
					{
						width: 100%;
					}
				}
			}
		}
		.follow-box
		{
			margin: 20upx;
			position: relative;
			.f-btn
			{
				font-size: 36upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				border-radius: 50upx;
				margin: 0 100upx;
			}
		}
		
		.f-line
		{
			border: 1upx #000 dashed;
			height: 80upx;
			margin: 0 100upx;
			border-radius: 50upx;
			position: absolute;
			width: 254px;
			top: -1px;
		}
		.f-e-box
		{
			background-color: #000;
			border-radius: 8upx;
			color: #FFF;
			padding: 2upx 20upx;
			width: 240upx;
			position: absolute;
			right: 70px;
			top:-25px;
		}
		
		.gd-btn-box-s
		{
			height: 100upx;
			width: 100%;
			position: absolute;
			bottom: 0;
			background-color: #FFF;
			border-top: 1upx solid #eee;
			display: flex;
			.tab-bar-box
			{
				height: 100upx;
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: space-around;
				top: 0;
				.tab-b
				{
					width: 50%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					height: 100%;
					.t-b-i
					{
						height: 40upx;
						width: 40upx;
						position: relative;
						image
						{
							height: 100%;
							width: 100%;
						}
					}
					.t-b-t
					{
						height: 24upx;
						color: #666;
					}
				}
				.tb-t-r-l
				{
					border-right: 1upx solid #EEE;
				}
			}
			.buy-fav-btn
			{
				width: 50%;
				height: 100upx;
				background-color: #F44848;
				font-size: 36upx;
				font-weight: bold;
				color: #FFF;
				text-align:center;
				line-height: 100upx;
			}
		}
	
	}
	
</style>